<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分时交易量统计</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        #chart-container {
            width: 100%;
            height: 600px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 20px;
            box-sizing: border-box;
        }
        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .status {
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
        button {
            padding: 8px 16px;
            background-color: #4a6cf7;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #3a5ce5;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <h2>当日分时交易量统计</h2>
    
    <div class="controls">
        <button id="toggleBtn">开始自动更新</button>
        <button id="resetBtn">重置数据</button>
        <span id="currentTime">当前时间: --:--:--</span>
    </div>
    
    <div class="status" id="lastUpdate">最后更新时间: --:--:--</div>
    
    <div id="chart-container"></div>

    <script>
        // 全局变量
        let chart;
        let updateInterval;
        let isUpdating = false;
        
        // 初始化数据 - 按10分钟间隔，共144个点 (24小时 * 6个点/小时)
        const timeSlots = [];
        const successData = Array(144).fill(0);
        const failData = Array(144).fill(0);
        
        // 生成时间槽 (00:00, 00:10, 00:20, ..., 23:50)
        for (let hour = 0; hour < 24; hour++) {
            for (let minute = 0; minute < 60; minute += 10) {
                timeSlots.push(
                    `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
                );
            }
        }
        
        // 获取当前时间对应的索引
        function getCurrentSlotIndex() {
            const now = new Date();
            const hour = now.getHours();
            const minute = now.getMinutes();
            // 计算10分钟间隔的索引
            const slotIndex = hour * 6 + Math.floor(minute / 10);
            return slotIndex;
        }
        
        // 模拟从后台获取数据
        function fetchData() {
            // 模拟API请求延迟
            return new Promise((resolve) => {
                setTimeout(() => {
                    // 模拟成功和失败的交易笔数 (随机数)
                    const success = Math.floor(Math.random() * 20) + 5; // 5-25
                    const fail = Math.floor(Math.random() * 5); // 0-5
                    
                    resolve({
                        success,
                        fail,
                        timestamp: new Date()
                    });
                }, 300);
            });
        }
        
        // 初始化图表
        function initChart() {
            const chartDom = document.getElementById('chart-container');
            chart = echarts.init(chartDom);
            
            // 获取当前时间对应的索引
            const currentSlotIndex = getCurrentSlotIndex();
            
            // 只显示到当前时间的数据
            const displayTimeSlots = timeSlots.slice(0, currentSlotIndex + 1);
            const displaySuccessData = successData.slice(0, currentSlotIndex + 1);
            const displayFailData = failData.slice(0, currentSlotIndex + 1);
            
            const option = {
                title: {
                    text: '当日分时交易量统计',
                    left: 'center',
                    textStyle: {
                        fontSize: 18
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['成功笔数', '失败笔数'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: displayTimeSlots,
                    axisLabel: {
                        // 每1小时显示一个标签
                        interval: (index) => {
                            // 每小时显示一个标签 (00:00, 01:00, 02:00...)
                            return index % 6 === 0;
                        },
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '交易笔数'
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: Math.max(0, (currentSlotIndex - 20) / currentSlotIndex * 100),
                        end: 100,
                        zoomLock: true
                    },
                    {
                        type: 'slider',
                        bottom: '5%',
                        start: Math.max(0, (currentSlotIndex - 20) / currentSlotIndex * 100),
                        end: 100,
                        handleSize: 8,
                        handleStyle: {
                            color: '#4a6cf7'
                        }
                    }
                ],
                series: [
                    {
                        name: '成功笔数',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(76, 175, 80, 0.6)' },
                                { offset: 1, color: 'rgba(76, 175, 80, 0.1)' }
                            ])
                        },
                        itemStyle: {
                            color: '#4CAF50'
                        },
                        data: displaySuccessData
                    },
                    {
                        name: '失败笔数',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 3
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: 'rgba(244, 67, 54, 0.6)' },
                                { offset: 1, color: 'rgba(244, 67, 54, 0.1)' }
                            ])
                        },
                        itemStyle: {
                            color: '#F44336'
                        },
                        data: displayFailData
                    }
                ]
            };
            
            chart.setOption(option);
            
            // 更新当前时间显示
            updateCurrentTime();
        }
        
        // 更新当前时间显示
        function updateCurrentTime() {
            const now = new Date();
            const timeString = now.toTimeString().split(' ')[0];
            document.getElementById('currentTime').textContent = `当前时间: ${timeString}`;
        }
        
        // 更新图表数据
        async function updateChart() {
            try {
                const data = await fetchData();
                const slotIndex = getCurrentSlotIndex();
                
                // 将数据叠加到当前时间点所属的10分钟分段
                successData[slotIndex] += data.success;
                failData[slotIndex] += data.fail;
                
                // 更新显示的时间段和数据
                const displayTimeSlots = timeSlots.slice(0, slotIndex + 1);
                const displaySuccessData = successData.slice(0, slotIndex + 1);
                const displayFailData = failData.slice(0, slotIndex + 1);
                
                // 更新图表
                chart.setOption({
                    xAxis: {
                        data: displayTimeSlots
                    },
                    series: [
                        {
                            data: displaySuccessData
                        },
                        {
                            data: displayFailData
                        }
                    ],
                    dataZoom: [
                        {
                            start: Math.max(0, (slotIndex - 20) / slotIndex * 100),
                            end: 100
                        },
                        {
                            start: Math.max(0, (slotIndex - 20) / slotIndex * 100),
                            end: 100
                        }
                    ]
                });
                
                // 更新最后更新时间
                const timeString = data.timestamp.toTimeString().split(' ')[0];
                document.getElementById('lastUpdate').textContent = `最后更新时间: ${timeString}`;
                
                // 检查是否到了第二天
                checkDateChange();
            } catch (error) {
                console.error('更新数据失败:', error);
            }
        }
        
        // 检查日期变化，如果到了第二天则重置数据
        function checkDateChange() {
            const now = new Date();
            const currentDay = now.getDate();
            
            // 如果当前日期与记录的不一致，说明到了第二天
            if (window.lastRecordedDay && window.lastRecordedDay !== currentDay) {
                resetData();
            }
            
            window.lastRecordedDay = currentDay;
        }
        
        // 重置数据
        function resetData() {
            // 清空数据
            successData.fill(0);
            failData.fill(0);
            
            // 重新初始化图表
            initChart();
            
            // 更新状态
            document.getElementById('lastUpdate').textContent = '最后更新时间: --:--:--';
        }
        
        // 切换自动更新
        function toggleAutoUpdate() {
            const toggleBtn = document.getElementById('toggleBtn');
            
            if (isUpdating) {
                // 停止更新
                clearInterval(updateInterval);
                toggleBtn.textContent = '开始自动更新';
                isUpdating = false;
            } else {
                // 开始更新
                updateInterval = setInterval(updateChart, 60000); // 每分钟更新一次
                toggleBtn.textContent = '停止自动更新';
                isUpdating = true;
                
                // 立即更新一次
                updateChart();
            }
        }
        
        // 初始化
        window.onload = function() {
            initChart();
            
            // 绑定按钮事件
            document.getElementById('toggleBtn').addEventListener('click', toggleAutoUpdate);
            document.getElementById('resetBtn').addEventListener('click', resetData);
            
            // 记录初始日期
            window.lastRecordedDay = new Date().getDate();
            
            // 设置定时器每秒更新当前时间显示
            setInterval(updateCurrentTime, 1000);
        };
        
        // 响应窗口大小变化
        window.onresize = function() {
            if (chart) {
                chart.resize();
            }
        };
    </script>
</body>
</html>